<template>
  <div class="app-container">
    <div class="head-container">
      <label class="el-form-item-label">员工编码</label>
      <el-input v-model="user.username" clearable placeholder="员工编码" style="width: 185px;" class="filter-item" />
      <label class="el-form-item-label">工位编码</label>
      <el-input v-model="scanForm.stationId" clearable placeholder="工位编码" style="width: 185px;" class="filter-item" />
      <label class="el-form-item-label">容器编码</label>
      <el-input
        ref="containerRef"
        v-model="scanForm.palletCode"
        clearable
        placeholder="容器编码"
        style="width: 185px;"
        class="filter-item"
        @keyup.enter.native="getMsg"
      />
      <el-card style="margin-top: 30px;">
        <el-descriptions
          title="工艺卡信息"
          size="medium"
          :content-style="{ 'font-size': '32px' }"
          :label-style="{ 'font-size': '32px' }"
        >
          <el-descriptions-item label="工艺卡id">{{ addForm.id }}</el-descriptions-item>
          <el-descriptions-item label="工艺卡编码">{{ addForm.processcardCode }}</el-descriptions-item>
          <el-descriptions-item label="产品类型">{{ addForm.productType }}</el-descriptions-item>
          <el-descriptions-item label="板件长">{{ addForm.size1 }}</el-descriptions-item>
          <el-descriptions-item label="板件宽">{{ addForm.size2 }}</el-descriptions-item>
          <el-descriptions-item label="材质">{{ addForm.material }}</el-descriptions-item>
          <el-descriptions-item label="厚度">{{ addForm.thick }}</el-descriptions-item>
          <el-descriptions-item label="压合层名">{{ addForm.layerName }}</el-descriptions-item>
          <el-descriptions-item label="外层板数量">{{ addForm.qty }}</el-descriptions-item>
          <el-descriptions-item label="底板尺寸">{{ addForm.consumeRate }}</el-descriptions-item>
        </el-descriptions>
        <div class="rightbutton">
          <el-button type="primary" size="medium" @click="getMsg">手动获取</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { getMsg } from '@/api/workStation'
import { mapGetters } from 'vuex'
import { EventSourcePolyfill } from 'event-source-polyfill'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      items: [
        { type: 'danger', label: 'OFF' },
        { type: 'success', label: 'ON' },
        { type: 'success', label: 'ON' },
        { type: 'danger', label: 'OFF' }
      ],
      leftformLabelWidth: '100px',
      rightformLabelWidth: '80px',
      addForm: {},
      scanForm: {
        processcardCode: '',
        stationId: '',
        palletCode: ''
      },
      formRules: {},
      timer: null,
      es: null,
      lastTime: '',
      nextTime: '',
      lastCode: '',
      nextCode: ''
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  mounted() {
    this.getSSE()
    this.scanForm.stationId = this.$route.query.stationCode
    this.$refs.containerRef.focus()
    this.timer = setInterval(() => {
      if (this.scanForm.palletCode === '') {
        this.$refs.containerRef.focus()
      }
      // else if (this.scanForm.palletCode === '' && this.scanForm.processcardCode !== '') {
      //   this.$refs.containerRef.focus()
      // }
    }, 2000)
    window.document.onkeypress = (e) => {
      if (window.event) {
        // IE
        this.nextCode = e.keyCode
      } else if (e.which) {
        // Netscape/Firefox/Opera
        this.nextCode = e.which
      }
      if (e.which === 13) {
        // 键盘回车事件
        if (this.scanForm.palletCode.length < 3) return // 扫码枪的速度很快，手动输入的时间不会让code的长度大于2，所以这里不会对扫码枪有效
        this.lastCode = ''
        this.lastTime = ''
        return
      }
      this.nextTime = new Date().getTime()
      if (!this.lastTime && !this.lastCode) {
        this.scanForm.palletCode = '' // 清空上次的条形码
      }
      this.lastCode = this.nextCode
      this.lastTime = this.nextTime
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getMsg() {
      getMsg(this.scanForm.palletCode).then(data => {
        if (data.meta.code === 200) {
          this.addForm = data.data.inventory
          this.$message.success(data.meta.msg)
        } else {
          this.$message.error(data.meta.msg)
          this.scanForm.palletCode = ''
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    getSSE() {
      const base = process.env.VUE_APP_BASE_API
      const url = `${base}/unbinding`
      const that = this
      this.es = new EventSourcePolyfill(url, {
        headers: { 'Authorization': getToken() }
      })

      this.es.onopen = function(event) {
        console.log('连接成功', event)
      }

      this.es.onmessage = function(event) {
        // to to something…
        const data = JSON.parse(event.data).data.inventory
        that.addForm = data[`${that.scanForm.stationId}`]
      }

      this.es.onerror = function(error) {
        // 监听错误
        console.log('错误', error)
        // that.handleError()
      }
    },
    // 错误重连事件
    handleError() {
      if (this.es.readyState === EventSourcePolyfill.CLOSED) {
        this.es.close()
        this.getSSE()
      } else if (this.es.readyState === EventSourcePolyfill.CONNECTING) {
        console.log('正在重连中')
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell {
  padding-bottom: 36px;
}

::v-deep .el-descriptions__title {
  font-size: 36px;
}
</style>
